require('./PageRzList.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Control } from 'react-keeper'
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells,
  Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,
  MediaBoxInfoMeta,Input,CellsTips,Icon,Label,CellsTitle,Toptips,Toast,InfiniteLoader,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea,SearchBar,PreviewItem} from  'react-weui/build/packages'
import rizhiok from './../../../assets/icon/打钩.png';
import rizhitp from './../../../assets/icon/监理日志.png';

class RzList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,
      urlDisplay:false,
    }
    this.showLoading = this.showLoading.bind(this);
    this.goselectjl = this.goselectjl.bind(this);
    this.onEngFetch = this.onEngFetch.bind(this);
    this.setSelectObj = this.setSelectObj.bind(this);
    this.goInfo = this.goInfo.bind(this);
    this.goPage = this.goPage.bind(this);
  }


  goInfo(){
     this.showLoading();
    Actions.goInfo();
  }

  goPage(){
    this.showLoading();
    console.log('html翻页001');
    Actions.addPage();
  }

  showLoading() {
    this.setState({showLoading: true});
    this.state.loadingTimer = setTimeout(()=> {
      this.setState({showLoading: false});
    }, 2000);
  }

  goselectjl(obj) {
    Control.go('/myyewu/rizhiaq',obj);
  }

  setSelectObj(obj) {
    console.log('返回');
    console.info(obj);
    Actions.setCurrentObj(obj);
  }

  onEngFetch(obj, callback) {
    console.info('engfetch');
  }

  render() {
    return (
      <div className="rzlist">
        <div>1</div>
        <page>
        <InfiniteLoader
          onLoadMore={ (resolve, finish) => {

/*            if(this.state.rzlstore.lastPage) {
              console.info('结束标记');
              finish();
            }
            else
            {
              console.info('开始标记');
              this.goPage();
            }*/

/*            setTimeout( ()=> {
              if(this.state.rzlstore.items.length > 50){
                finish()
              }else{
                this.goPage( ()=> resolve());
              }
            }, 1000)*/

            setTimeout( ()=> {
              if(this.state.rzlstore.items.length > 30){
                finish()
              }else{
                this.goPage();
                this.setState({
                  items: this.state.rzlstore.items.concat([this.state.rzlstore.items.length])
                }, ()=> resolve())
              }
            }, 1000)

          }}
        >

            <CellsTitle >总数: {this.state.rzlstore.items.length}</CellsTitle>
            <Cells>
              {

                this.state.rzlstore.items.length > 0 ?
                  this.state.rzlstore.items.map((item,i)=>{
                    return (

                      <Cell access link onClick={(e)=>{
                        Actions.goInfo(item);
                        }
                      }>

                        <CellBody>
                          { item.jllxName}
                          <p style={{fontSize: '13px', color: '#888888'}}>{item.eng.engName}</p>
                          <p style={{fontSize: '13px', color: '#888888'}}>{ item.coding}</p>
                          <p style={{fontSize: '13px', color: '#888888'}}>{ new Date(item.jlrq).toLocaleString() }</p>
                        </CellBody>
                        <CellFooter  style={{position: 'relative', marginRight: '10px'}}>
                          <img src={item.isUpload ? rizhiok : rizhitp} alt="" style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                        </CellFooter>
                      </Cell>
                    )
                  })
                  : <MediaBox>未找到数据！</MediaBox>
              }

            </Cells>
            <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
        </InfiniteLoader>
        </page>
      </div>
    );
  }


  notice() {
  }


  componentDidMount() {
    Actions.init();
  }

  componentWillMount() {

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.rzlstore || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] ) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] ) {
        return true;
      }
    }
    return false;
  }
}

RzList.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(RzList, Reflux.connect(Store, 'rzlstore'));


export default RzList ;
